<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <title>vue-demo1</title>
    <!-- 引入 vue.js 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="/js/vue.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/index.js"></script>
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!--查询-->
    <el-row>
        <el-col :span="4"><el-input  v-model="searchForm.roleName"  size="small" placeholder="请输入用户名"></el-input></el-col>
        <el-col :span="4"><el-input v-model="searchForm.status"  size="small" placeholder="状态"></el-input></el-col>
        <el-col :span="4"><el-button type="primary" @click="search" size="small" icon="el-icon-search">搜索</el-button></el-col>
        <el-col :span="4"><el-button type="success" round @click="handlerAdd"  size="small" icon="el-icon-circle-plus">添加</el-button></el-col>
        <el-col :span="4"></el-col>
        <el-col :span="4"></el-col>
    </el-row>
    <!--表格显示-->
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="roleId"
                width="160px"
                label="角色编号">
        </el-table-column>
        <el-table-column
                prop="roleName"
                width="160px"
                label="角色名称">
        </el-table-column>
        <el-table-column
                prop="roleKey"
                width="160px"
                label="权限">
        </el-table-column>
 <!--       <el-table-column
                prop="roleSort"
                width="160px"
                label="显示顺序">
        </el-table-column>
        <el-table-column
                prop="dataScope"
                width="160px"
                label="数据范围">
        </el-table-column>-->
        <el-table-column
                prop="status"
                width="160px"
                label="状态">
            <!--三元判断-->
            <template slot-scope="scope">
                <el-tag
                        :type="scope.row.status == 0 ? 'success' : 'danger'"
                        disable-transitions>{{scope.row.status == 0 ? "正常" : "停用"}}
                </el-tag>
            </template>
        </el-table-column>
<!--        <el-table-column
                prop="delFlag"
                width="160px"
                label="删除">
        </el-table-column>-->
        <el-table-column
                prop="createBy"
                width="160px"
                label="创建者">
        </el-table-column>
        <el-table-column
                prop="createTime"
                width="160px"
                label="创建时间">
        </el-table-column>
        <el-table-column
                prop="updateBy"
                width="160px"
                label="更新者">
        </el-table-column>
        <el-table-column
                prop="updateTime"
                width="160px"
                label="更新时间">
        </el-table-column>
        <el-table-column
                prop="remark"
                width="160px"
                label="备注">
        </el-table-column>
        <el-table-column label="操作" width="260px" fixed="right">
            <!--slot槽   scope所有表数据   scope.$index 行下标 scope.row 表中的一行数据-->
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary" round
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger" round
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                <el-button
                        size="mini"
                        type="primary" round
                        @click="handlePermission(scope.$index, scope.row)">授权</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2,5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!--更新对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="角色名称" :label-width="formLabelWidth">
                <el-input v-model="form.roleName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色权限字符串" :label-width="formLabelWidth">
                <el-input v-model="form.roleKey" autocomplete="off"></el-input>
            </el-form-item>
<!--            <el-form-item label="显示顺序" :label-width="formLabelWidth">
                <el-input v-model="form.roleSort" autocomplete="off"></el-input>
            </el-form-item>-->
<!--            <el-form-item label="数据范围" :label-width="formLabelWidth">
                <el-input v-model="form.dataScope" autocomplete="off"></el-input>
            </el-form-item>-->
            <el-form-item label="角色状态" :label-width="formLabelWidth">
                <!--<el-input v-model="form.status" autocomplete="off"></el-input>-->
                <el-select v-model="form.status" placeholder="状态">
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="停用" value="1"></el-option>
                </el-select>
            </el-form-item>
<!--            <el-form-item label="删除标志" :label-width="formLabelWidth">
                <el-input v-model="form.delFlag" autocomplete="off"></el-input>
            </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOrUpdate">确 定</el-button>
        </div>
    </el-dialog>

    <!--授权对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible1">
        <el-tree
                :data="data"
                show-checkbox
                default-expand-all
                check-strictly=false
                node-key="id"
                ref="tree"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="checkedKeys"
                :props="defaultProps">
        </el-tree>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="addRoleMenu">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    var app = new Vue({
        el:"#app",
        //存放所有js对象的  plain  javascript object
        data(){
            return{
                tableData: [], //表格数据
                currentPage: 1,//当前页 第几页
                pageSize: 15,//每页显示数量
                total: 400,//总条数
                searchForm:{roleName:'',status:''},//搜索对象
                title: '角色添加', //弹出框标题
                dialogFormVisible: false,//对话框是否显示
                dialogFormVisible1:false,//授权是否显示
                checkedKeys:[],//选中时默认值
                upcheck:[],//获取当前已选中的
                roleId: '',
                form: { //form表单对象
                    roleId: '',
                    roleName: '',
                    roleKey:'',
                    roleSort:'',
                    dataScope:'',
                    status:'',
                    delFlag:'',
                    createBy:'',
                    createTime:'',
                    updateBy:'',
                    updateTime:'',
                    remark:''
                },
                formLabelWidth: '120px' ,//form中label的宽度
                data:[],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
            }
        },
        //所有页面元素触发的事件的方法
        methods:{
            loadData1(){
                //定义一个变量，赋值为当前vue对象
                var _this = this;
                //使用axios向后台发请求，获取数据
                //axios.post('http://172.16.7.66:8080/dept/queryByPage', {
                axios.get(//请求方式，必须和后端资源暴露方式一致
                    '/menu/queryAllTreeData')//请求的url
                    .then(function (response) {//成功响应的处理方法   response 是响应的数据
                        console.log(response);
                        //response 一定是json对象  stringify 把json对象转json字符串
                        //alert(JSON.stringify(response));
                        //判断返回是否正确
                        if(response.data.code==200){
                            //直接使用this 代表axios的对象  this
                            _this.data=response.data.data;
                        }else{
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },


            // 添加关联表(角色权限表)数据权限
            addRoleMenu(){
                let treeNodes=this.$refs.tree.getCheckedNodes();//获取选中所有节点
                if(treeNodes.length==0){
                    _this.$message.error('错了哦，这是一条错误消息，至少勾选一个权限');
                    return;
                }
                // 循环拼接字符串
                let menuIds="";
                for (const treeNode of treeNodes) {
                    menuIds+=treeNode.id+",";
                }

                //     向后台添加数据
                //定义一个变量，赋值为当前vue对象
                var _this = this;
                //使用axios向后台发请求，获取数据
                //axios.post('http://172.16.7.66:8080/dept/queryByPage', {
                axios.get(//请求方式，必须和后端资源暴露方式一致
                    '/role/addRoleAndMenu?roleId='+ this.roleId+"&menuIds="+menuIds) //请求的url
                    //请求携带的参数
                    .then(function (response) {//成功响应的处理方法   response 是响应的数据
                        console.log(response);
                        //response 一定是json对象  stringify 把json对象转json字符串
                        // alert(JSON.stringify(response));
                        //判断返回是否正确
                        if(response.data.code==200){
                            // 提示成功
                            _this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                            // 关闭弹窗
                            _this.dialogFormVisible1=false;
                            // 重新加载数据
                            _this.loadData();
                        }else{
                            _this.$message.error('错了哦，这是一条错误消息');
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },


            //封装的加载数据方法
            loadData(){
                //定义一个变量，赋值为当前vue对象
                var _this = this;
                //使用axios向后台发请求，获取数据
                //axios.post('http://172.16.7.66:8080/dept/queryByPage', {
                axios.post(//请求方式，必须和后端资源暴露方式一致
                    '/role/queryByPage',//请求的url
                    {"pageNo":this.currentPage,"pageSize":this.pageSize,"data":{"roleName":this.searchForm.roleName,
                            "status":this.searchForm.status}})//请求携带的参数
                    .then(function (response) {//成功响应的处理方法   response 是响应的数据
                        console.log(response);
                        //response 一定是json对象  stringify 把json对象转json字符串
                        // alert(JSON.stringify(response));
                        //判断返回是否正确
                        if(response.data.code==200){
                            //直接使用this 代表axios的对象  this
                            _this.tableData=response.data.data.list;
                            _this.total=response.data.data.total;
                        }else{
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //处理每页数量发生变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                //让每页数量发生改变
                this.pageSize=val;
                //调用加载数据方法
                this.loadData();
            },
            //处理当前页（页码 第几页）发生变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                //让第几页发生改变
                this.currentPage=val;
                //调用加载数据方法
                this.loadData();
            },
            //按条件查询
            search(){
                //直接调用loadData
                this.loadData();
            },
            //处理添加
            handlerAdd(){
                //修改标题
                this.title='角色添加';
                //清空原来的值
                this.form={};
                //让对话框显示
                this.dialogFormVisible = true;
            },
            //处理更新
            handleEdit(index, row) {
                console.log(index, row);
                this.title='角色更新';
                this.form=row;
                //alert(JSON.stringify(this.form));
                //让对话框显示
                this.dialogFormVisible = true;
            },
            // 权限
            handlePermission(index, row) {
                console.log(index, row);
                let id= row.roleId;
                this.roleId=id;

                //定义一个变量，赋值为当前vue对象
                var _this = this;
                //使用axios向后台发请求，获取数据
                //axios.post('http://172.16.7.66:8080/dept/queryByPage', {
                axios.get(//请求方式，必须和后端资源暴露方式一致
                    '/menu/queryAllTreeData')//请求的url
                    .then(function (response) {//成功响应的处理方法   response 是响应的数据
                        console.log(response);
                        //response 一定是json对象  stringify 把json对象转json字符串
                        //alert(JSON.stringify(response));
                        //判断返回是否正确
                        if(response.data.code==200){
                            //直接使用this 代表axios的对象  this
                            _this.data=response.data.data;
                            _this.checkedKeys=[];
                            //使用axios向后台发请求，获取数据
                            //axios.post('http://172.16.7.66:8080/dept/queryByPage', {
                            axios.get(//请求方式，必须和后端资源暴露方式一致
                                '/role/queryMenuIdsByRoleId?roleId='+id)//请求的url
                                .then(function (response) {//成功响应的处理方法   response 是响应的数据
                                    console.log(response);
                                    //response 一定是json对象  stringify 把json对象转json字符串
                                    //alert(JSON.stringify(response));
                                    //判断返回是否正确
                                    if(response.data.code==200){
                                        //直接使用this 代表axios的对象  this
                                        _this.checkedKeys=response.data.data;
                                    }else{
                                    }
                                })
                                .catch(function (error) {
                                    console.log(error);
                                });
                        }else{
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                this.dialogFormVisible1=true;
                //alert(index+"--------"+JSON.stringify(row));
                //row当前行数据 是json数据
                //修改标题为 部门更新
            },

            //调用接口添加或者更新数据
            addOrUpdate(){
                var url = "/role/add";
                //判断是否添加还是更新
                if(this.title==='角色更新'){
                    url = "/role/update";
                }
                //定义一个变量，赋值为当前vue对象
                var _this = this;
                //使用axios向后台发请求，获取数据
                //axios.post('http://172.16.7.66:8080/dept/queryByPage', {
                axios.put(//请求方式，必须和后端资源暴露方式一致
                    url,//请求的url
                    this.form)
                    .then(function (response) {//成功响应的处理方法   response 是响应的数据
                        console.log(response);
                        //response 一定是json对象  stringify 把json对象转json字符串
                        // alert(JSON.stringify(response));
                        //判断返回是否正确
                        if(response.data.code==200){
                            //提示信息
                            _this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                            //关闭对话框
                            _this.dialogFormVisible = false;
                            //重新加载数据
                            _this.loadData();
                        }else{
                            _this.$message.error('错了哦，这是一条错误消息');
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //处理删除
            handleDelete(index, row) {
                if(confirm("是否确定要删除")){
                    axios.delete("/role/delete", {params:{roleId:row.roleId}})
                        .then(response=> {//成功响应的处理方法   response 是响应的数据
                            if(response.data.code==200){
                                //提示信息
                                this.loadData();
                                this.$message.success('恭喜你，这是一条成功消息');
                                // //关闭对话框
                                // _this.dialogFormVisible = false;
                                //重新加载数据

                            }else{
                                console.log(error);
                                this.$message.error('错了哦，这是一条错误消息');
                            }
                        })
                }
            }
        },
        created(){//初始化操作
            //alert("创建后----");
            this.loadData()

        },
    })
</script>
</body>
</html>
